<template>
  <v-select
    v-model="select"
    :items="yearList"
    :rules="ruleFunction"
    outlined
    dense
    :label="label"
  ></v-select>
</template>

<script>
export default {
  name: 'DateYearPicker',
  model: {
    prop: 'selectYear',
    event: 'change'
  },
  props: {
    selectYear: {},
    label: {
      type: String,
      default: '选择年份'
    },
    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    dense: {
      type: Boolean,
      required: false,
      default: true
    },
    ruleFunction: {
      type: Array,
      required: false,
      default:()=>[]
    },
    range: {
      type: String,
      required: false,
      default: '5'
    }
  },
  data() {
    return {}
  },
  computed: {
    yearList() {
      const arr = []
      const date = new Date()
      const cur_year = date.getFullYear()
      const year_range = Number(this.range)
      for (var i = cur_year - year_range; i <= cur_year + year_range; i++) {
        arr.push(i)
      }
      return arr.reverse()
    },
    select: {
      get() {
        let select = this.selectYear
        return select
      },

      set(val) {
        let select = val
        this.$emit('change', select) // 告诉父组件选择分类更新了
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
